<template>
  <div class="max-w-[80%] min-w-[500px] h-full m-auto">
    <el-skeleton animated>
      <template #template>
        <div class="w-full flex flex-row justify-between items-center" v-for="item of 4" :key="item">
          <div class="flex flex-row gap-2 my-4">
            <el-skeleton-item variant="image" style="height: 50px; width: 50px" />
            <div class="flex flex-col justify-center gap-4">
              <el-skeleton-item variant="text" style="width: 30px; height: 10px" />
              <el-skeleton-item variant="text" style="width: 60px; height: 10px" />
            </div>
          </div>
          <el-skeleton-item variant="button" style="width: 50px; height: 20px" />
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped></style>
